<template>
  <!-- 操作栏 图标 -->
  <div class="img-list">
    <template v-for="(item, index) in imgList" :key="index">
      <template v-if="imgFormat(item)">
        <el-tooltip
          v-if="item.tip"
          class="item"
          effect="dark"
          placement="left"
          :enterable="false"
          :content="item.tip"
        >
          <img
            v-if="item.src"
            @click.stop="emits('itemEvent', { prop: item.prop, row, scope })"
            :src="item.src"
            :style="item.style"
          />
          <i
            v-if="item.iconClass"
            @click.stop="emits('itemEvent', { prop: item.prop, row, scope })"
            link
            :class="[item.iconClass, imgClassFn(item)]"
            :style="item.style"
          />
        </el-tooltip>
        <span v-else>
          <img
            v-if="item.src"
            @click.stop="emits('itemEvent', { prop: item.prop, row, scope })"
            :src="item.src"
            :style="item.style"
          />
          <i
            v-if="item.iconClass"
            @click.stop="emits('itemEvent', { prop: item.prop, row, scope })"
            link
            :class="item.iconClass"
            :style="item.style"
          />
          <span
            :class="[item.class, 'label_style']"
            v-if="item.label"
            @click.stop="emits('itemEvent', { prop: item.prop, row, scope })"
            >{{ item.label }}</span
          >
        </span>
      </template>
    </template>
  </div>
</template>

<script setup>
import _ from 'lodash';

const props = defineProps({
  row: {
    type: Object,
    default: () => {
      return {};
    },
  },
  scope: {
    type: Object,
    default: () => {
      return {};
    },
  },
  imgList: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

const emits = defineEmits(['itemEvent']);

function imgFormat(item) {
  if (item?.format && _.isFunction(item?.format)) {
    return item.format({ row: props.row, scope: props.scope });
  } else return true;
}

function imgClassFn(item) {
  if (item?.classFn && _.isFunction(item?.classFn)) {
    return item.classFn({ row: props.row, scope: props.scope });
  }
}
</script>

<style lang="scss" scoped>
img {
  cursor: pointer;
  vertical-align: middle;
}
img + img {
  margin-left: 10px;
}
i {
  font-size: 24px;
  color: var(--el-color-primary);
  cursor: pointer;
  + i {
    margin-left: 10px;
  }
}
.label_style {
  font-size: 12px;
  color: var(--el-color-primary);
  cursor: pointer;
}
.btn_disabled {
  cursor: not-allowed;
  color: var(--el-button-disabled-text-color);
}
</style>
